<template>
  <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white" lazy-render>
    <van-skeleton avatar :row="4" avatar-size="120" avatar-shape="square" :loading="skeLoading" />


    <van-swipe-item v-for="item in list" :key="item.encodeId">
      <van-image :src="item.imageUrl" fit="fill" />
    </van-swipe-item>
  </van-swipe>
</template>

<script setup>
import { reactive, toRefs, ref } from 'vue'
import { getBanner } from '@/request/api/api.js'


// 轮播图
let data = reactive({
  list: [],
})

const { list} = toRefs(data);
let skeLoading = ref(true);

getBanner().then(data => {
  list.value = data.banners;
  skeLoading.value = false;
})


</script>
  
<style lang='less' scoped>
.van-swipe {
  height: 300px;
  border-radius: 35px;
  width: 95%;
  margin: 0 auto;

  .van-image {
    height: 100%;
    max-width: 100%;
  }

  // color: #fff;
  // font-size: 20px;
  // line-height: 150px;
  // text-align: center;
  // background-color: #39a9ed;
}
</style>